@use '../../components/HostingStyleSchedule/shared.scss';

page {
  display: grid;
  grid-template:
    'info' min-content
    'bottom' 1fr
    / 1fr;
  min-height: 100vh;

  .bg {
    position: absolute;
    width: 100vw;
    height: 100vw;

    z-index: -1;

    &::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: '';

      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, #000000 100%);
    }
  }

  .nav-bar {
    position: fixed;
    z-index: 100;
    width: 100vw;
  }

  .info {
    margin-top: var(--nav-bar-height);
    grid-area: info;
    width: 100vw;

    padding: calc(8vw + 47px) 0 16px 16px;
    display: grid;
    grid-template:
      'avatar name edit-profile' min-content
      'avatar city .' min-content
      'introduction introduction introduction' min-content
      'tag-list tag-list tag-list' min-content
      'extra-info extra-info extra-info' min-content
      / min-content 1fr min-content;
    grid-gap: 12px;

    .avatar {
      grid-area: avatar;
      width: 20.8vw;
      height: 20.8vw;

      border-radius: 50%;
      overflow: hidden;
      border: 2px solid #fff;
    }

    .name {
      grid-area: name;
      align-self: flex-end;
      font-size: 20px;
      color: #fff;
    }

    .city {
      grid-area: city;
      font-size: 12px;
      color: rgba($color: #fff, $alpha: 0.6);
      transform: translateY(-4px);
    }

    .edit-profile {
      grid-area: edit-profile;
      justify-self: end;
      align-self: flex-end;
      width: 79px;
      height: 25px;
      background: rgba(255, 248, 85, 0.2);
      border: 1px solid #fff855;
      border-radius: 12.5px 0 0 12.5px;

      display: flex;
      justify-content: center;
      align-items: center;

      column-gap: 4px;

      &__icon {
        width: 11px;
        height: 13px;
      }

      &__text {
        font-size: 12px;
        color: #fff855;
      }
    }

    .introduction {
      grid-area: introduction;
      font-size: 14px;
      color: #fff;

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .tag-list {
      grid-area: tag-list;
      width: 100%;

      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .tag-list__item {
        padding: 0 11px;
        height: 18px;
        background: rgba($color: #fff, $alpha: 0.2);
        border-radius: 19px;

        display: flex;
        align-items: center;

        font-size: 10px;
        color: #fff;
      }
    }

    .extra-info {
      display: flex;
      align-items: center;
      grid-area: extra-info;
      column-gap: 20px;

      &__item {
        height: 100%;

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        font-size: 12px;
        color: #fff;

        row-gap: 2px;

        .extra-info__top--icon {
          width: 20px;
          height: 20px;
        }
      }
    }
  }

  .bottom {
    grid-area: bottom;
    width: 100vw;

    border-radius: 12.5px 12.5px 0 0;
    background-color: #fff;

    display: grid;
    grid-template-rows: min-content 1fr;

    .tab-list {
      height: 54px;
      background-color: #fff;
      border-radius: 12.5px 12.5px 0 0;

      position: sticky;
      top: calc(var(--nav-bar-height) - 5px);
      z-index: 100;

      display: flex;
      justify-content: space-between;
      align-items: center;

      &__item {
        flex: 1;

        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 16px;
        color: #333;

        &--active {
          position: relative;

          &::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 50%;
            transform: translateX(-50%);

            width: 20px;
            height: 2px;
            background: #ff457a;
            border-radius: 7px;
          }
        }
      }
    }

    .content {
      width: 100vw;

      .work-list {
        height: 100%;
      }

      .schedule {
        width: 100%;
      }

      .comment {
        width: 100%;
      }
    }
  }

  .add-btn {
    position: fixed;
    z-index: 100;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, 0);

    background: linear-gradient(90deg, #5bc1ff, #357cff 100%);
    border-radius: 40px;

    padding: 6px 12px 6px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 6px;

    &__icon {
      width: 36px;
      height: 36px;
    }

    &__text {
      font-size: 16px;
      line-height: 16px;
      color: #fff;
    }
  }
}
